@import '../common/index.css';
.van-uploader {
    display: inline-block;
    position: relative;
}
.van-uploader__wrapper {
    display: flex;
    flex-wrap: wrap;
}
.van-uploader__slot:empty {
    display: none;
}
.van-uploader__slot:not(:empty) + .van-uploader__upload {
    display: none !important;
}
.van-uploader__upload {
    align-items: center;
    background-color: var(--uploader-upload-background-color, #f7f8fa);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: var(--uploader-size, 80px);
    justify-content: center;
    margin: 0 8px 8px 0;
    position: relative;
    width: var(--uploader-size, 80px);
}
.van-uploader__upload:active {
    background-color: var(--uploader-upload-active-color, #f2f3f5);
}
.van-uploader__upload-icon {
    color: var(--uploader-icon-color, #dcdee0);
    font-size: var(--uploader-icon-size, 24px);
}
.van-uploader__upload-text {
    color: var(--uploader-text-color, #969799);
    font-size: var(--uploader-text-font-size, 12px);
    margin-top: var(--padding-xs, 8px);
}
.van-uploader__upload--disabled {
    opacity: var(--uploader-disabled-opacity, 0.5);
}
.van-uploader__preview {
    cursor: pointer;
    margin: 0 8px 8px 0;
    position: relative;
}
.van-uploader__preview-image {
    display: block;
    height: var(--uploader-size, 80px);
    overflow: hidden;
    width: var(--uploader-size, 80px);
}
.van-uploader__preview-delete,
.van-uploader__preview-delete:after {
    height: var(--uploader-delete-icon-size, 14px);
    position: absolute;
    right: 0;
    top: 0;
    width: var(--uploader-delete-icon-size, 14px);
}
.van-uploader__preview-delete:after {
    background-color: var(--uploader-delete-background-color, rgba(0, 0, 0, 0.7));
    border-radius: 0 0 0 12px;
    content: '';
}
.van-uploader__preview-delete-icon {
    color: var(--uploader-delete-color, #fff);
    font-size: var(--uploader-delete-icon-size, 14px);
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(0.7) translate(10%, -10%);
    z-index: 1;
}
.van-uploader__file {
    align-items: center;
    background-color: var(--uploader-file-background-color, #f7f8fa);
    display: flex;
    flex-direction: column;
    height: var(--uploader-size, 80px);
    justify-content: center;
    width: var(--uploader-size, 80px);
}
.van-uploader__file-icon {
    color: var(--uploader-file-icon-color, #646566);
    font-size: var(--uploader-file-icon-size, 20px);
}
.van-uploader__file-name {
    box-sizing: border-box;
    color: var(--uploader-file-name-text-color, #646566);
    font-size: var(--uploader-file-name-font-size, 12px);
    margin-top: var(--uploader-file-name-margin-top, 8px);
    padding: var(--uploader-file-name-padding, 0 4px);
    text-align: center;
    width: 100%;
}
.van-uploader__mask {
    align-items: center;
    background-color: var(--uploader-mask-background-color, rgba(50, 50, 51, 0.88));
    bottom: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.van-uploader__mask-icon {
    font-size: var(--uploader-mask-icon-size, 22px);
}
.van-uploader__mask-message {
    font-size: var(--uploader-mask-message-font-size, 12px);
    line-height: var(--uploader-mask-message-line-height, 14px);
    margin-top: 6px;
    padding: 0 var(--padding-base, 4px);
}
.van-uploader__loading {
    color: var(--uploader-loading-icon-color, #fff) !important;
    height: var(--uploader-loading-icon-size, 22px);
    width: var(--uploader-loading-icon-size, 22px);
}
